<template>
  <div class="center-container">
    <div class="total-card">
      <div class="total-item">
        <div class="total-item-title">
          运输总量<span class="total-item-unit">({{ weightUnit }})</span>
        </div>
        <Number :number="weightNumber" />
      </div>
      <div class="total-item">
        <div class="total-item-title">
          累计金额<span class="total-item-unit">({{ moneyUnit }})</span>
        </div>
        <Number :number="moneyNumber" />
      </div>
    </div>
    <div class="center-map-cont" :class="{ 'full-screen': mapFullScreen }">
      <div class="map-card">
        <div class="map-control">
          <!-- <div
            @click="resetMap"
            v-show="showResetBtn && !mapFullScreen"
            class="rt-btn active"
          >
            复&nbsp;&nbsp;位
          </div> -->
          <div @click="toogleMapFullScreen" class="rt-btn active">
            <span v-if="!mapFullScreen">全&nbsp;&nbsp;屏</span>
            <span v-else>默&nbsp;&nbsp;认</span>
          </div>
          <div
            v-show="centerMapOnload"
            @click="mapAddLine"
            class="rt-btn active"
          >
            <span>精品线路</span>
          </div>
        </div>
        <iframe
          width="100%"
          height="100%"
          style="border: none"
          src="dataVMap/centerMap.html"
          ref="centerMap"
        ></iframe>
        <div class="ZhongGuoNanhai">
          <div class="nanhai">
            <div class="scan"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-card">
      <Yunli />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Number from "../components/Number.vue";
import Yunli from "./components/Yunli.vue";
import { getTrafficTotal } from "@/api/networShow/dataV";
export default {
  components: {
    Number,
    Yunli
  },
  data() {
    return {
      weightUnit: "吨",
      weightNumber: 0,
      moneyUnit: "元",
      moneyNumber: 0,
      showLine: true
    };
  },
  computed: {
    ...mapState({
      centerMap: state => state.dataV.centerMap,
      hanlder: state => state.dataV.hanlder,
      rightTag: state => state.dataV.rightTag,
      centerMapOnload: state => state.dataV.centerMapOnload,
      truckjson: state => state.dataV.truckjson,
      mapFullScreen: state => state.dataV.mapFullScreen
    }),
    showResetBtn() {
      return (
        this.rightTag === 1 && this.centerMapOnload && this.truckjson.length
      );
    }
  },
  methods: {
    resetMap() {
      if (this.hanlder == "truck_portPlan") {
        this.$store.commit("dataV/UPDATE_HANLDER", "truck_portTransport"); // 更新与操作
        this.centerMap.clearTruck();
        this.centerMap.addTruck(this.truckjson);
      } else {
        this.centerMap.resetMap();
      }
    },
    // 处理map全屏
    toogleMapFullScreen() {
      this.$store.commit("dataV/TOOGLE_MAP_FULL_SCREEN");
      this.$nextTick(() => {
        const zoom = this.mapFullScreen ? 3.6 : 2.7;
        this.centerMap.resize(zoom);
      });
    },
    // 添加精品线路
    mapAddLine() {
      // 清除地图上原有的默认数据
      this.centerMap.clearDefaultPort();
      // 清除地图火车站
      this.centerMap.clearTrainStation();
      // 清除地图车辆
      this.centerMap.clearTruck();
      // 添加精品线路起始点
      this.centerMap.addStartEndPoint();
      // 重置地图
      this.centerMap.resetMap();
      // 添加精品线路
      this.centerMap.addLine();
    },
    // 获取运输总量
    getTrafficTotal() {
      getTrafficTotal().then(res => {
        const { data } = res;
        if (data.code == 200) {
          let { quantity, totalAmout } = data.data;
          // this.weightNumber = parseInt(
          //   quantity > 999999 ? quantity / 10000 : quantity
          // );
          this.weightNumber = (quantity > 999999
            ? quantity / 10000
            : quantity
          ).toFixed(2);
          this.weightUnit = quantity > 999999 ? "万吨" : "吨";
          // this.moneyNumber = parseInt(
          //   totalAmout > 999999 ? totalAmout / 10000 : totalAmout
          // );
          this.moneyNumber = (totalAmout > 999999
            ? totalAmout / 10000
            : totalAmout
          ).toFixed(2);
          this.moneyUnit = totalAmout > 999999 ? "万元" : "元";
        }
      });
    }
  },
  mounted() {
    this.getTrafficTotal(); // 获取运输总量
    const _this = this;
    this.$nextTick(() => {
      this.$store.commit(
        "dataV/INIT_CENTERMAP",
        this.$refs.centerMap.contentWindow
      );
    });
    this.$refs.centerMap.onload = function() {
      _this.$store.commit("dataV/CENTERMAPOnload");
    };
  }
};
</script>

<style lang="less" scoped>
.center-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 70px 22px 0 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .total-card {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 26px;
    .total-item {
      .total-item-title {
        height: 22px;
        font-size: 22px;
        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 10px;
        .total-item-unit {
          font-size: 16px;
          display: inline-block;
          margin-left: 5px;
        }
      }
    }
  }
  .center-map-cont {
    height: 483px;
    &.full-screen {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: #14275b;
      z-index: 999;
      .map-card {
        width: 100%;
        height: 100%;
        background: #14275b;
        .map-control {
          font-size: 24px;
          height: 80px;
          width: 140px;
          text-align: center;
          margin-left: 20px;
        }
        .ZhongGuoNanhai {
          bottom: 120px;
          right: 200px;
          width: 150px;
          height: 202px;
        }
        .nanhai,
        .scan {
          width: 150px;
          height: 202px;
        }
        .nanhai {
          background-size: 150px 202px;
        }
      }
    }

    .map-card {
      height: 100%;
      position: relative;
      .map-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        width: 70px;
        height: 40px;
        justify-content: space-between;
        font-size: 10px;
        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
        font-weight: 500;
        color: #14275b;
        &:last-child {
          margin-right: 7px;
        }
        .rt-btn {
          cursor: pointer;
          display: inline-block;
          position: relative;
          padding: 0 10px;
          margin-right: 1px;
          text-align: center;
          box-sizing: border-box;
          &::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(270deg, #29457a 0%, #537bb2 100%);
            z-index: -1;
            transform: skew(-30deg);
          }
          &.active {
            color: #87bcff;
            font-weight: bold;
          }
          &:hover {
            opacity: 0.9;
          }
        }
      }
      .ZhongGuoNanhai {
        width: 100px;
        height: 135px;
        position: absolute;
        bottom: 0px;
        right: 0px;
        overflow: hidden;
      }
      .nanhai,
      .scan {
        width: 100px;
        height: 135px;
      }
      .nanhai {
        position: relative;
        background-size: 100px 135px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("https://oss.sdland-sea.com/group1/M01/0C/3A/Cof8EmF58_KAQtsgAAAvC4WP7_0081.png");
        overflow: hidden;
      }
      .scan {
        position: absolute;
        background: url("https://oss.sdland-sea.com/group1/M01/0C/3B/Cof8EmF5-rCAJzT4AADRnNwolss467.png")
          center center no-repeat;
        animation: move 2s ease-in-out infinite;
        -webkit-animation: move 2s ease-in-out infinite;
      }
      @keyframes move {
        from {
          top: -200px;
        }

        to {
          top: 0px;
        }
      }
    }
  }

  .bottom-card {
  }
}
</style>
